<template>
	<view>
		<view class="each-day-box" v-for="(item, index) in content" :key="index">
			<view class="each-day-box__day-bar"><view class="label">第{{ item.day }}天</view></view>
			<view class="each-day-box__tit-bar">{{item.title}}</view>
			<view class="each-day-box__tra-bar" v-if="item.traffic && show_traffic==1">
				<view class="iconfont">&#xe676;</view>
				<view>交通：{{item.traffic}}</view>
			</view>
			<view class="each-day-box__diet-group" v-if="item.breakfirst && item.lunch && item.supper && show_repast==1">
				<view class="iconfont">&#xe672;</view>
				<view class="item" v-if="item.breakfirst">早餐：{{item.breakfirst}}</view>
				<view class="item" v-if="item.lunch">午餐：{{item.lunch}}</view>
				<view class="item" v-if="item.supper">晚餐：{{item.supper}}</view>
			</view>
			<view class="each-day-box__stay-bar clearfix" v-if="item.lodge && show_lodge==1">
				<view class="iconfont">&#xe681;</view>
				<view class="hd">住宿：</view>
				<view class="bd">{{item.lodge}}</view>
			</view>
			<view class="each-day-box__route-bar clearfix">
				<view class="iconfont">&#xe671;</view>
				<view class="hd">行程：</view>
				<view class="bd">
					<parser :html="item.content"></parser>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import parser from "./jyf-parser/jyf-parser.vue"
	export default {
		name: 'moduleDay',
		components:{
			parser
		},
		props: {
			content: {
				type: Array,
				default(){
					return []
				}
			},
			show_repast: {
				type: String,
				default: 1
			},
			show_lodge: {
				type: String,
				default: 1
			},
			show_traffic: {
				type: String,
				default: 1
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	@mixin icon {
		color: $uni-text-color-primary;
		position: absolute;
		top: 0;
		left: -18rpx;
		font-size: 36rpx;
	}
	/* 行程 */
	.each-day-box{
	    padding: 0 24rpx 24rpx 42rpx;
	    border-bottom: 2rpx solid #f2f2f2;
	    font-size: 24rpx;
		&__day-bar{
			text-align: center;
			.label{
			    display: inline-block;
			    color: #fff;
			    padding: 10rpx 20rpx;
			    vertical-align: top;
			    border-bottom-left-radius: 10rpx;
			    border-bottom-right-radius: 10rpx;
			    font-size: 24rpx;
			    background: #2dbb55
			}
		}
		&__tit-bar{
			padding: 20rpx 0;
			text-align: center;
			font-size: 28rpx
		}
		&__tra-bar{
			line-height: 42rpx;
			padding-left: 30rpx;
			padding-bottom: 24rpx;
			position: relative;
			border-left: 2rpx dotted #e5e5e5;
			font-size: 24rpx;
			.iconfont{
				@include icon
			}
		}
		&__stay-bar{
			color: #666;
			line-height: 42rpx;
			padding-left: 30rpx;
			padding-bottom: 24rpx;
			position: relative;
			border-left: 2rpx dotted #e5e5e5;
			.iconfont{
				@include icon
			}
			.hd{
			    color: #333;
			    float: left;
			    width: 76rpx;
			    height: 36rpx;
			    vertical-align: top;
			    font-size: 24rpx
			}
		}
		&__diet-group{
			padding-left: 30rpx;
			padding-bottom: 24rpx;
			position: relative;
			border-left: 2rpx dotted #e5e5e5;
			.iconfont{
				@include icon
			}
			.item{
			    color: #333;
			    line-height: 42rpx;
			    font-size: 24rpx
			}
		}
		&__route-bar{
			color: #666;
			line-height: 42rpx;
			padding-left: 30rpx;
			padding-bottom: 24rpx;
			position: relative;
			border-left: 2rpx dotted #e5e5e5;
			.iconfont{
				@include icon
			}
			.hd{
			    color: #333;
			    float: left;
			    width: 76rpx;
			    height: 36rpx;
			    vertical-align: top;
			    font-size: 24rpx
			}
		}
	}
</style>
